import AddMovie from "./addmovies.js";
import UpdateMovie from "./updatemovie.js"

let $ = layui.jquery;
// es6的默认导出,用类
export default class Movie {
  constructor() {
    this.render();
    this.handle();

  }
  // html
  render() {
    let template = `
    <script type="text/html" id="addMovieTemplate"></script>
       
        <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">查询</label>
          <div class="layui-input-inline">
            <select name="type" lay-verify="required">
              <option value="score">电影评分</option>
              <option value="type">电影类型</option>
              <option value="area">上映地区</option>
            </select>
          </div>
          
          <div class="layui-input-inline">
            <input type="text" name="value" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline">
          <button id="queryBtn" type="button" class="layui-btn" lay-filter="formDemo">查询</button>
        </div>
        </div>   
      
    
      </form>
    <!-- 布局 -->
    <div class="layui-container">

        <div class="layui-row">
            <div class="layui-col-md12">
                <table id="demo" lay-filter="test"></table>
            </div>

        </div>
        <!-- 新增电影按钮 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-sm" lay-event="addMovie">
                新增电影
              </button>
            </div>
          </script>
        <!-- 更多操作 -->
        <script type="text/html" id="toolEventDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script>

      

          <script type="text/html" id="updateMovieTemplate"></script>
          `
    $("#content").html(template);

  }
  // js
  handle() {
    let form = layui.form;
    let table = layui.table;
    let layer = layui.layer;
  
   
  
    form.render();

    //第一个实例
    table.render({
      // 头部新增
      toolbar: "#toolbarDemo",
      id: "myTable",

      elem: '#demo',
      url: '/api/listMovie' //数据接口
      , page: true //开启分页如果打开这一项，实际往后台传递的url地址是 /users?page=1&limit=10
      , cols: [[ //表头
        { field: '_id', title: 'ID', sort: true, fixed: 'left' }
        , { field: 'name', title: '电影名', }
        , { field: 'ename', title: '电影英文名', sort: true }
        , { field: 'type', title: '类型', }
        , { field: 'area', title: '上映地区', }
        , { field: 'time', title: '电影时长', }
        , { field: 'upDate', title: '上映时间', }
        , { field: 'score', title: '电影评分', }
        , { field: 'count', title: '电影票房', }
        , { field: 'intro', title: '剧情简介', }
        , { field: 'indexImage', title: '首页图片', }
        , { field: 'director', title: '导演', templet: function (d) { return d.director[0].name } }//后三个取值
        , { field: 'actor', title: '演员', templet: function (d) { return d.actor[0].name } }
        , { field: 'images', title: '图片', templet: function (d) { return d.images[0].image } }
        , { title: '操作', width: 120, templet: '#toolEventDemo' }

      ]]
    });
    // 查询
    $("#queryBtn").on("click", function () {
      let key = $("select[name='type']").val();
      let val = $("input[name='value']").val();
      // console.log(val);

      table.reload("myTable", {
        where: {//设定异步数据接口的额外参数，任意设
          key,
          val,

        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      })

    })

    //头工具栏事件进来就有新增界面
    table.on('toolbar(test)', function (obj) {

      switch (obj.event) {
        case 'addMovie':
          new AddMovie();

          break;
      };
    });

    //单元格工具事件
    table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      console.log(data.images[0].image);
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      // 删除事件删除成功但是显示删除失败
      if (layEvent === 'del') { //删除
        layer.confirm('确定删除吗？', function (index) {
          // ajax请求
          $.ajax({
            type: "delete",
            url: "/api/delMovie/" + data._id,

            success: function (res) {
              if (res.code === 200) {
                layer.msg("删除成功");
                obj.del();
                table.reload("myTable", {});

              }
              else {
                layer.msg("删除失败");
              }

            }

          })



        });
        // 修改要获取里面的值
      } else if (layEvent === 'edit') { //编辑
        new UpdateMovie(data);



      }
    })

  }
}